<template>
	<view class="page">
		<view class="sec">
			<image class="sec-img" mode="aspectFill" src="//via.placeholder.com/100"></image>
			<view class="sec-con">
				<view class="row">
					<view class="col">
						<view class="label">
							工具名称：
						</view>
						<view class="val">
							{{toolParams.i_name}}
						</view>
					</view>
					<view class="col">
						<view class="label">
							厂商：
						</view>
						<view class="val">
							{{toolParams.mf_name}}
						</view>
					</view>
				</view>
				<view class="row">
					<view class="col">
						<view class="label">
							型号：
						</view>
						<view class="val">
							{{toolParams.model}}
						</view>
					</view>
					<view class="col">
						<view class="label">
							出厂日期：
						</view>
						<view class="val">
							{{toolParams.release_date}}
						</view>
					</view>
				</view>
				<view class="row">
					<view class="col">
						<view class="label">
							检测周期：
						</view>
						<view class="val">
							{{toolParams.inspect_period}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="form">
			<view class="form-tit">
				外观确认:
			</view>
			<radio-group @change="radioChange">
				<label class="form-row">
					<radio value="1" checked/>外观</label>
				</label>
				<label class="form-row">
					<radio value="2"/>有破损不影响使用</label>
				</label>
				<label class="form-row">
					<radio value="3"/>有破损影响使用</label>
				</label>
				<view class="form-btn" @click="appearanceCheck">
					提交
				</view>
			</radio-group>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import api from '../../consts/api.js'
	let tool_id = ''
	export default {
		data() {
			return {
				sure: '1'
			}
		},
		computed: {
			...mapState(['toolParams'])
		},
		methods: {
			
			radioChange(e) {
				this.sure = e.detail.value
			},
			
			back() {
				uni.navigateBack({
					delta: -1
				});
			},
			
			async appearanceCheck() {
				let res = await this.$fetch('PUT',api.appearanceCheck, {
					tool_id,
					appearance_check: this.sure
				})
				let {code, data} = res.data
				if (code === 0) {
					this.back()
				}
				
			}
		},
		onLoad(opt) {
			tool_id = opt.tool_id
		}
	}
</script>

<style>
.sec {
	height: 300upx;
	background: #FFFFFF;
	border-radius: 30upx;
	margin: 40upx 20upx 0;
	display: flex;
}
.sec-img {
	width: 200upx;
	height: 200upx;
	margin: 50upx 20upx;
	flex: 2 200upx 0;
}
.sec-con {
	flex: 5;
	margin-top:40upx
}
.row {
	display: flex;
	margin: 30upx 0;
}
.col {
	flex: 1;
	font-size: 12upx;
}
.label , .val {
	display: inline-block;
	color: #999999;
}
.form {
	height: 480upx;
	background: #fff;
	margin: 20upx;
	border-radius: 30upx;
	padding: 20upx;
}
/* .uni-radio-input-checked{
	background-color: rgb(255,174,0) !important;
} */
.form-tit {
	font-size: 32upx;
	font-weight:bold;
	
}
.form-row {
	margin-left: 26upx;
	height: 100upx;
	display: flex;
	align-items: center;
	border-bottom: 1upx solid #eee;
	color:#999 ;
}
.form-btn {
	height: 80upx;
	width: 200upx;
	font-size: 32upx;
	border-radius: 80upx;
	text-align: center;
	line-height: 80upx;
	color: rgb(46,152,148);
	border: 1upx solid rgb(46,152,148);
	float: right;
	margin: 40upx 0 0 0;
}
</style>
